<script setup lang="ts">
import { SubmitBtn } from '@fl/components'
import { cloneDeep } from 'lodash-es'
import MapBuildingDetail from './map-building-detail.vue'

const state = defineModel<any>('state', { required: true, default: {} })
const list = defineModel<any>('list', { required: true, default: [] })

const greenIcon
  = 'https://public-obs-cdn.anjulian.com.cn/2025-01-15/83986ca9-788a-4e3c-8ef6-916e645cc735.png'
const blueIcon
  = 'https://public-obs-cdn.anjulian.com.cn/2025-01-15/dbc26a6b-8f67-4835-9e48-72d0019faa8b.png'
const redIcon = 'https://public-obs-cdn.anjulian.com.cn/2025-03-14/83265ed4-89fc-4f3f-bb34-8a92e7b38727.png'
const yellowIcon = 'https://public-obs-cdn.anjulian.com.cn/2025-03-14/ceaf3ca8-afa5-47ce-bde6-2aa2d734f96c.png'

// 1已加装-绿色、2已上报-黄色、3加装中-蓝色、4全部-红色
const iconDict = {
    1: greenIcon,
    2: yellowIcon,
    3: blueIcon,
    4: redIcon,
}

const initialPage = {
    currentPage: 1,
    pageSize: 50,
    total: 0,
}
const activeName = computed(() => {
    return state.value.type
})
const buildingStr = ref<string>('')
const tablePage = ref(cloneDeep(initialPage))

function handleClick(val: any) {
    tablePage.value.currentPage = 1
    state.value.type = val.paneName
}
// function formatTabCount(tab) {
//   return tab;
//   //   if (tabCount.value) {
//   //     return tabCount.value.find((item) => item.code == tab).count;
//   //   } else {
//   //     return 0;
//   //   }
// }

watch(() => tablePage.value.currentPage, (val) => {
    state.value.pageIndex = val
})
watch(() => tablePage.value.pageSize, (val) => {
    state.value.pageSize = val
})

// function handleSizeChange() {
//   state.value.pageSize = tablePage.value.pageSize
// }

function submit() {
    state.value.buildingName = buildingStr.value
    tablePage.value.currentPage = 1
}

function reset() {
    state.value.buildingName = ''
    state.value.type = ''
    buildingStr.value = ''
    tablePage.value = cloneDeep(initialPage)
}
const choosed = ref<number>(0)
const dialogVisible = ref<boolean>(false)
const detail = ref<any>()
const records = computed(() => list.value.records)
const total = computed(() => list.value?.total || 0)
function showDetail(item) {
    detail.value = item
    dialogVisible.value = true
}
</script>

<template>
    <div class="list-box">
        <div class="search mb-16 flex">
            <el-input v-model="buildingStr"
                      size="small"
                      placeholder="请输入楼栋名称关键字"
                      @keyup.enter="submit"
            />

            <div class="btn-box ml-12px flex">
                <SubmitBtn type="primary"
                           @click="submit"
                >
                    搜索
                </SubmitBtn>

                <el-button @click="reset()">
                    重置
                </el-button>
            </div>
        </div>

        <el-tabs v-model="activeName"
                 class="demo-tabs"
                 :stretch="true"
                 @tab-click="handleClick"
        >
            <!-- 1已加装-绿色、2已上报-黄色、3加装中-蓝色、4全部-红色 -->
            <el-tab-pane label="全部"
                         name=""
            />

            <el-tab-pane label="已上报"
                         name="2"
            />

            <el-tab-pane label="加装中"
                         name="3"
            />

            <el-tab-pane label="已加装"
                         name="1"
            />
        </el-tabs>

        <div class="list p-12 pt-0">
            <div v-for="(item, index) in records"
                 :key="index"
                 :class="choosed === index ? 'p-12 item bg-[#F7F8FA]' : 'p-12 item'"
                 @click="choosed = index"
            >
                <div class="align-center mb-4 flex justify-between">
                    <div class="align-center font-16 font-bold flex">
                        <img :src="iconDict[item.status]"
                             alt=""
                             width="20"
                             height="20"
                        >

                        <span style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 250px;
              "
                        >{{ item?.building }}</span>
                    </div>

                    <div v-show="choosed == index && Number(item.status) < 4 "
                         class="color-[#006DCC] font-14 cursor-pointer"
                         @click="showDetail(item)"
                    >
                        详情 <el-icon color="#006DCC">
                            <ArrowRight />
                        </el-icon>
                    </div>
                </div>

                <div class="color-[#86909C] font-14">
                    地址：{{ item?.address }}
                </div>

                <div class="color-[#86909C] font-14">
                    单元：{{ item?.unit }}
                </div>
            </div>
        </div>

        <div class="page flex justify-end">
            <!-- @size-change="handleSizeChange" -->
            <el-pagination v-model:current-page="tablePage.currentPage"
                           v-model:page-size="tablePage.pageSize"
                           :page-sizes="[50]"
                           layout="total, sizes, prev, pager, next"
                           :total="total"
                           size="small"
            />
        </div>
    </div>

    <MapBuildingDetail v-model:detail="detail"
                       v-model:visible="dialogVisible"
    />
</template>

<style lang="scss" scoped>
.list-box {
    background: #ffffff;
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 999;
    user-select: none;
    height: calc(80vh - 48px);
    width: 400px;
    padding: 12px;
    .list {
        overflow: auto;
        height: calc(80vh - 240px);

        &::-webkit-scrollbar {
            width: 6px;
            background-color: #f5f5f5;
            height: 12px;
        }
        .item {
            border-radius: 4px;
            margin-bottom: 8px;
        }
    }
    .page {
        position: absolute;
        bottom: 0;
        // width: 100%;
        background-color: #fff;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
        width: 400px;
        right: 0;
        padding: 20px 10px;
    }
}
:deep(.el-pagination .el-pagination--default) {
    // width: 100%;
    // overflow: auto;
}
:deep(.el-pagination .btn-prev) {
    margin-left: 0;
}
:deep(.el-pagination__sizes) {
    width: 80px;
}
:deep(.el-pagination .el-select) {
    width: 80px;
}
</style>
